<template>
  <div>
    <bread-crumb two="数据统计" three="数据报表"></bread-crumb>
    <el-card class="box-card">
      <div id="main" ref="echartsBox" style="width: 600px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  mounted () {
    this.renderList()
  },
  methods: {
    async renderList () {
      const myChart = echarts.init(this.$refs.echartsBox)
      const { data: dt } = await this.$http.get('reports/type/1')
      this.op = dt.data

      this.op.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      }
      this.op.grid = {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
      this.op.title = {
        text: '用户来源'
      }
      const option = this.op
      myChart.setOption(option)
      console.log(this.op)
    }
  },

  data () {
    return {
      op: {}
    }
  }
}
</script>

<style lang="less" scoped>
</style>
